<template>
  <div>
    <el-row class="row-bg" type="flex" justify="space-around">
      <el-col :span="24"><div class="demo" style="height: 420px" >
        <span class="center">地震年份分析</span>
        <div style="text-align:center;">
          <el-form label-width="80px" inline>
          <el-form-item label="地震年份">
            <el-input-number
              v-model="form.startYear"
              controls-position="right"
              :min="0"
              :max="9999"
            ></el-input-number>
            <span> ~ </span>
            <el-input-number
              v-model="form.endYear"
              controls-position="right"
              :min="0"
              :max="9999"
            ></el-input-number>
          </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getYear">搜索</el-button>
              <el-button type="primary" @click="reset1">重置</el-button>
            </el-form-item>
          </el-form>
          </div>
        <el-row>
          <div ref="chart" style="height: 350px;text-align:center;"></div>
        </el-row>
      </div></el-col>
    </el-row>
    <el-row><div style="height: 10px"></div></el-row>
    <el-row class="row-bg" type="flex" justify="space-around">
      <el-col :span="24"><div class="demo" style="height: 420px" >
        <div class="demo" style="height: 420px" >
          <span class="center">地震月份分析</span>
          <div style="text-align:center;">
            <el-form label-width="80px" inline>
              <el-form-item label="地震年份">
                <el-input-number
                  v-model="form2.startYear"
                  controls-position="right"
                  :min="0"
                  :max="9999"
                ></el-input-number>
                <span> ~ </span>
                <el-input-number
                  v-model="form2.endYear"
                  controls-position="right"
                  :min="0"
                  :max="9999"
                ></el-input-number>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getMonth">搜索</el-button>
                <el-button type="primary" @click="reset2">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-row>
            <div ref="chart2" style="height: 350px;text-align:center;"></div>
          </el-row>
        </div>
      </div></el-col>
    </el-row>
  </div>

</template>

<script>
import * as echarts from "echarts/core";
import { getYear,getMonth } from "@/api/geo/geo";
import { ScatterChart } from "echarts/charts";
import { GeoComponent } from "echarts/components";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
export default {
  name: 'index3',
  data() {
    return {
      chartData: {
        xAxisData: [],
        seriesData: []
      },
      chart2Data: {
        xAxisData: [],
        seriesData: []
      },
      form: {
        startYear: null,
        endYear: null,
        year:null,
        startMonth:null,
        endMonth:null
      },
      form2: {
        startYear: null,
        endYear: null,
        year:null,
        startMonth:null,
        endMonth:null
      },
    }
  },
  mounted() {
    this.getYear();
    this.getMonth();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData,
          axisTick: {
            alignWithLabel: true,
            interval: 0, // 强制显示所有标签
            rotate: -45, // 旋转角度，避免标签重叠
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData.seriesData,
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }]
      }
      myChart.setOption(option)
    },
    initChart2() {
      const chartDom = this.$refs.chart2
      const myChart = echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category',
          data: this.chart2Data.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chart2Data.seriesData,
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }]
      }
      myChart.setOption(option)
    },
    getYear() {
      let params = {...this.form};
      this.removeZeroProps(params)
      getYear(params).then((res) => {
        this.chartData.xAxisData = res.data[0];
        this.chartData.seriesData = res.data[1];
        this.initChart();
      });
    },
    getMonth() {
      let params = {...this.form2};
      this.removeZeroProps(params)
      getMonth(params).then((res) => {
        this.chart2Data.xAxisData = res.data[0];
        this.chart2Data.seriesData = res.data[1];
        this.initChart2();
      });
    },
    removeZeroProps(obj) {
      for (let prop in obj) {
        if (obj[prop] === 0) {
          delete obj[prop];
        }
      }
      return obj;
    },
    reset1(){
      this.form = {};
      this.getYear();
    },
    reset2(){
      this.form2 = {};
      this.getMonth();
    },
  }
}
</script>

<style scoped>
.demo {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #909399;
}
.row-bg {
  padding: 10px 0;
  background-color: #FFFFFF;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
</style>
